﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/App.Master" Inherits="System.Web.Mvc.ViewPage<IList<Role>>" %>

<%@ Import Namespace="Ornament.MemberShip" %>
<%@ Import Namespace="Ornament.MemberShip.Permissions" %>
<%@ Import Namespace="Ornament.Web" %>
<%@ Import Namespace="Qi.Web" %>
<script runat="server">
    private bool hasDelete = OrnamentContext.Current.HasRight<string>("Role", RoleOperator.Delete);
    private bool hasModify = OrnamentContext.Current.HasRight<string>("Role", RoleOperator.Modify);
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    角色列表
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageTitle" runat="server">
    角色列表
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server">    
    <script src="<%=Url.Content("~/Scripts/lib/jquery.bindTools.js") %>" type="text/javascript"></script>
    <style type="text/css">
        .edit, .delete, .save, .cancel
        {
            cursor: pointer;
        }
        .leftPanel
        {
            float: left;
            width: 280px;
        }
        .rightPanel
        {
            border-left: solid 1px #cccccc;
            float: left;
            width: 450px;
            margin-left: 10px;
            min-height: 150px;
        }
        #Permissions
        {
            overflow: auto;
        }
        .clear
        {
            clear: both;
        }
        .ui-accordion-content
        {
            overflow: visible;
        }
    </style>
    <%
        var objectList = ((IEnumerable<Permission>)
            ViewData["permissions"]).ToDictionary(permission => permission.Id.ToString(), permission => permission.Name);
        var permissionMaping = JsonHelper.ToJson(objectList);
    %>
    <script language="javascript" type="text/javascript">
      var mapPermission=<%=permissionMaping%>;
        $(document).ready(function() {
         
            $("#table").accordion({ autoHeight: false });
            enableProgressBar = true;

            $(".edit").live('click', function() {
                var id = $(this).attr("href");
                id = id.substr(1);
                $("#table").bindTool('switch', 'editTemplate', $(this).closest(".temp"));
                return false;
            });

            $(".cancel").live('click', function() {
                var area=$(this).closest('.temp');
                $("#table").bindTool('bind',area.data('current'),area);
                $("#table").bindTool('switch','template',$(this).closest('.temp'));
             });
             
            $(".save").live('click',function(){                
                var area=$(this).closest(".temp");
                var role = $("#table").bindTool('collect',area);

                $.post('<%=Url.Action("Save")%>',{role:$.toJSON(role)} , function(data) {
                    oAlert(data.Message);
                    if (data.Success) {
                        $("#table").bindTool('switch', 'template', area);
                    }
                });
                
            });


            $("#addButton").button({ icons: { primary: "ui-icon-plus"} }).click(function() {
                $("#modifyRole").dialog('option', 'title', "添加新角色").dialog("open");
            });
            

            $(".delete").live('click',function() {
                var ids = $(this).closest('.temp').find('#name').val();
                    
                if (confirm("是否删除以下角色" + ids + " ?")) {
                    $.getJSON('<%=Url.Action("Delete")%>', { name: ids },
                        function(data) {
                            oAlert(data);
                            $(this).closest('.tmp').parent().empty();
                            
                        });
                }
            });
            
               $("#table").bindTool({
                mergeWay:false,
                template: $($("#show").html()),
                way: [
                    { member: "Id", type: "string"},
                    { member: "Name", to: "#Name", type: "string" },
                    { member: "Comment", to: "#Comment", type: "string" },
                    { member: "Permissions", type: "array-string",
                        to: function(val,area) {
                            var result = []
                            var searchArea=$(this);
                            $(val).each(function() {                                
                                result.push('<a href="#' + this+ '">' + mapPermission[this] + '</a>');
                            });
                            $("#Permissions",searchArea).append(result.join("<br>"));
                        },
                        from: function() {
                            var result = []
                            $("#Permissions").children("a").each(function() {
                                var id = $(this).attr("href");
                                id = id.substr(1);                                
                                result.push(id);

                            });
                            return result;
                        }
                    }
                ],
                onBound:function(jObject,target){                            
                            $(".edit",$(target)).attr("href",jObject.Id);
                        },               
                editTemplate: {
                    template: $("#edit"),
                    way: [
                        { member:"Id"},
                        { member: "Name" },
                        { member: "Comment" },
                        { member: "Permissions" }
                    ],
                    onBind:function(json){
                        $(this).data("current",json);
                    }

                }
            });


        });     
    </script>
</asp:Content>
<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="MainContent">
    <div class="buttonContainer">
        <a id="addButton">新增</a>
    </div>
    <div id="table">
        <%
            
            foreach (Role role in Model)
            {%>
        <h3>
            <a href="#">
                <%=role.Name%></a></h3>
        <div>
            <div class="temp">
                <div class="buttonContainer">
                    <input type="hidden" value="<%=role.Id %>" name="Id" />
                    <%if (hasModify)
                      {%>
                    <a href="#<%=role.Id%>" class="edit">编辑</a>
                    <%
                      }%>
                    <%if (hasDelete)
                      {%>
                    <a href="#<%=role.Id%>" class="delete">删除</a>
                    <%} %>
                    <hr />
                </div>
                <fieldset class="cssform">
                    <legend>基本信息</legend>
                    <div class="leftPanel">
                        <p>
                            <label>
                                名称:</label>
                            <label class="data" id="Name"><%=role.Name%></label>
                        </p>
                        <p>
                            <label>
                                备注:</label>
                            <label class="data" id="Comment"><%=role.Remark%></label>
                        </p>
                    </div>
                    <div class="rightPanel">
                        <label>
                            许可证:</label>
                        <div id="Permissions" class="data">
                            <%
                foreach (Permission item in role.Permissions)
                {%>
                            <a href="#<%=item.Id%>">
                                <%=item.Name%></a><br />
                            <%
                }%>
                        </div>
                    </div>
                    <div style="clear: both">
                    </div>
                </fieldset>
            </div>
        </div>
        <%
            }%>
    </div>
    <script type="text/bindTool" id="show">
    <div class="temp">
                <div class="buttonContainer">
                    <input type="hidden"name="Id" />
                    <a class="edit">编辑</a>
                    <%if (hasDelete)
                      {%>
                    <a class="delete">删除</a>
                    <%} %>
                    <hr />
                </div>
                <fieldset class="cssform">
                    <legend>基本信息</legend>
                    <div class="leftPanel">
                        <p>
                            <label>名称:</label>
                            <label class="data" id="Name"></label>
                        </p>
                        <p>
                            <label>备注:</label>
                            <label class="data" id="Comment"></label>
                        </p>
                    </div>
                    <div class="rightPanel">
                        <label>许可证:</label>
                        <div id="Permissions"></div>
                    </div>
                    <div style="clear: both"></div>
                </fieldset>
            </div>
    </script>
    <div class="temp cssform" style="display: none" id="edit">
        <div class="buttonContainer">
            <a class="save">保存</a> <a class="cancel">取消</a>
            <hr />
        </div>
        <input type="hidden" name="Id" />
        <div class="fieldItem">
            <label for="RoleName">
                名称:</label>
            <input type="text" id="RoleName" name="Name" />
        </div>
        <div class="fieldItem">
            <label for="RoleComment" style="display: block">
                备注:</label>
            <textarea id="RoleComment" name="Comment" cols="30" rows="4"></textarea>
        </div>
        <div class="fieldItem">
            <label>
                许可证明</label>
            <table style="width: 80%" class="table">
                <thead>
                    <tr>
                        <th>
                            选择
                        </th>
                        <th>
                            名字
                        </th>
                        <th>
                            资源
                        </th>
                    </tr>
                </thead>
                <%

                    foreach (var permission in (IEnumerable<Permission>)ViewData["permissions"])
                    {
                %>
                <tr title="<%=permission.Remark%>">
                    <td>
                        <input type="checkbox" value="<%=permission.Id%>" name="Permissions" />
                    </td>
                    <td>
                        <%=permission.Name%>
                    </td>
                    <td>
                        <%=permission.Resource.Name%>
                    </td>
                </tr>
                <%
                    }
                %>
            </table>
        </div>
    </div>
</asp:Content>
